<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #ul {
            position: absolute;
            left: 0;
            top: 0;
        }

        #ul li {
            width: 230px;
            height: 230px;
            float: left;
            padding: 10px;
            font-size: 100px;
            text-align: center;
            line-height: 250px;
            background: yellow;
        }

        li:last-child {
            background: red;
        }

        #ul img {
            width: 100%;
            height: 100%;

        }

        #box {
            position: relative;
            width: 1000px;
            height: 220px;
            border: 1px solid red;
            margin: 40px auto;
            overflow: hidden;
        }
    </style>

    <script>
        window.onload = function () {
            var oBox = document.getElementById('box');
            var oUl = document.getElementById("ul");
            var oL = document.getElementById("left");
            var oR = document.getElementById('right');
            var aLi = oUl.children;
            oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
            var times;
            var lf = 0;
            oL.onclick = function () {
                clearInterval(times);
                times = setInterval(function () {
                    lf--;
                    /* if (lf<-oUl.offsetWidth/4 ) {
                     lf = 0
                     }*/
                    if (lf < -(aLi.length - 4) * aLi[0].offsetWidth) {
                        lf = 0
                    }
                    oUl.style.left = lf + "px";

                }, 8)
            }
            oR.onclick = function () {
                clearInterval(times);
                times = setInterval(function () {
                    lf++;
                    /* if (lf<-oUl.offsetWidth/4 ) {
                     lf = 0
                     }*/
                    if (lf < 0) {
                        lf = oUl.offsetWidth - oBox.offsetWidth
                    }
                    oUl.style.left = -lf + "px";

                }, 8)
            }
        }
    </script>
</head>
<body>

<input type="button" value="左边" id="left">
<input type="button" value="右边" id="right">
<div id="box">
    <ul id="ul">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>


    </ul>
</div>
</body>
</html>